<template>
  <image @click="openRefuel" class="body" mode="widthFix"
         src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1742181600646.png"/>

  <view class="record" @click="refuelListShow = !refuelListShow, refuelShow = false, selectList()">
    <view>查看申请记录</view>
  </view>

  <view v-if="refuelShow" class="refuel">
    <view>
      <view>
        <text>* 姓名</text>
        <input v-model="username" maxlength="20" />
      </view>
      <view>
        <text>* 手机号</text>
        <input v-model="phone" maxlength="11" />
      </view>
      <view>
        <text>员工推荐码</text>
        <input style="color: #555555;" v-model="code" maxlength="20" disabled="true" />
      </view>
      <view>
        <text>备注</text>
        <input v-model="remark" maxlength="100"/>
      </view>
    </view>

    <view>
      <view @click="closeRefuel">取消</view>
      <view @click="submitRefuel">提交</view>
    </view>
  </view>
  
  <view v-if="refuelListShow" class="refuel-list">
    <view>
      <view v-for="(item, index) in refuelList" :key="item.id">
        {{index + 1}}. {{item.username}} {{item.phone}}
      </view>
    </view>

    <view @click="refuelListShow = !refuelListShow, refuelShow = false">关闭</view>
  </view>

</template>

<script setup>
import {ref} from "vue"
import { insertApi, selectListApi } from "@/api/refuel"
import {getUserInfoApi} from "@/api/user"
import {onShow} from "@dcloudio/uni-app";

let userId = ref()
let re = ref()
onShow(() => {
  uni.setStorageSync("is_view_refuel", 1)

  getUserInfoApi().then((res) => {
    userId.value = res.data.id
  })
})

let username = ref(), phone = ref(), code = ref('214546'), remark = ref(), refuelShow = ref(false)

const openRefuel = () => {
  username.value = null
  phone.value = null
  remark.value = null
  refuelShow.value = true
}
const closeRefuel = () => {
  refuelShow.value = false
}

const submitRefuel = async () => {
  if(!username.value) {
    await uni.showToast({
      icon: 'none',
      title: '请填写姓名',
      duration: 2000
    })
  } else if(!phone.value) {
    await uni.showToast({
      icon: 'none',
      title: '请填写手机号',
      duration: 2000
    })
  } else {
    const res = await insertApi({
      fillinUserId: userId.value,
      username: username.value,
      phone: phone.value,
      code: code.value,
      remark: remark.value
    })

    await uni.showToast({
      title: res.msg,
      duration: 2000
    })
    refuelShow.value = false
  }
}

let refuelListShow = ref(false), refuelList = ref([])

const selectList = async () => {
  await selectListApi(userId.value).then((res) => {
    refuelList.value = res.data
  })
}
</script>

<style scoped lang="less">
.body {
  width: 100%;
}

.refuel {
  width: 90%;
  height: 260px;
  position: fixed;
  top: 30%;
  left: 5%;
  border-radius: 6px;
  background-color: #efeff4;

  >view:nth-child(1)>view {
    width: 90%;
    margin: 20px 0 0 5%;

    >text {
      display: inline-block;
      width: 30%;
      color: #555555;
      font-size: 16px;
      text-align: right;
      margin-right: 10%;
    }

    >input {
      display: inline-block;
      width: 60%;
      border-bottom: 1px solid #d3d3d3;
      position: relative;
      top: 5px;
      color: #555555;
    }
  }

  >view:nth-child(2) {
    margin-top: 30px;
    text-align: center;

    >view {
      display: inline-block;
      width: 30%;
    }

    >view:nth-child(1) {
      border-right: 1px solid #d3d3d3;
      color: #555555;
    }

    >view:nth-child(2) {
      color: #007aff;
    }
  }

}

.record {
  width: 100%;
  height: 50px;
  background-color: #3d6195;

  > view {
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    text-align: center;
  }
}

.refuel-list {
  width: 90%;
  height: 400px;
  position: fixed;
  top: 20%;
  left: 5%;
  border-radius: 6px;
  background-color: #efeff4;

  >view:nth-child(1) {
    padding: 20px;
    height: 340px;
    overflow-y: auto;

    >view {
      margin-top: 10px;
      color: #555555;
      font-size: 15px;
    }
  }

  >view:nth-child(2) {
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 0;
    text-align: center;
    border-top: 1px solid #d3d3d3;
    color: #555555;
  }
}
</style>